<template>
	<view class="svip">
		<view class="navgation">
			<view class="navgation-box">
				<view class="left-back">
					<image src="../../static/image/top3.png" mode=""></image>
					<view class="left-back-text">
						<view class="left-back-fan" @click="back">
							<image src="/static/image/icon-fan.png" mode=""></image>
						</view>
						<view class="left-back-wen">
							<text>律师详情</text>
						</view>
					</view>
				</view>
			</view>
			<view class="navgation-box-image">
				<image src="/static/image/bottom4.png" mode=""></image>
			</view>
		</view>
		<view class="svip-bj">
			<view class="svip-bj-img">
				<image src="/static/image/gebj.png" mode=""></image>
			</view>
			<view class="svip-flex">
				<view class="svip-ul">
					<view class="svip-li">
						<image src="/static/image/icon-vip.png" mode=""></image>
					</view>
					<view class="svip-lo">
						<text>立即开通会员</text>
					</view>
				</view>
				<view class="svip-cent">
					<view class="svip-lu" @click="discounts">
						<text>查看权益</text>
					</view>
				</view>
			</view>

		</view>
		<view class="svip-annual">
			<view class="svip-annual-ul">
				<view class="svip-annual-ul-text">
					<text>年费会员专享权益</text>
				</view>
				<view class="svip-annual-ul-img">
					<image src="/static/image/icon-vip.png" mode=""></image>
				</view>
			</view>
			<view class="svip-annual-up">
				<view class="svip-annual-up-text">
					<text>VIP</text>
				</view>
				<view class="svip-annual-up-txt">
					<text>¥998</text>
				</view>
			</view>
		</view>
		<view class="vip-cneter">
			<view class="vip-siw">
				<radio-group class="radio-group" @change="radioChange">
					<view class="radio" v-for="(item, index) in items" :key="item.name">
						<view class="siw-flex">
							<view class="siw-img">
								<image :src=" '/static/image/' + item.icon + '.png' " mode=""></image>
							</view>
							<view class="siw-tex">
								{{item.value}}
							</view>
						</view>
						<view class="siw-rad">
							<radio :value="item.name" :checked="item.checked" />
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="vip-bottom" @click="payment">
			<text>立即支付</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						id: 1,
						icon: 'weixzf',
						value: '微信支付'
					},
					{
						id: 2,
						icon: 'zhifbzf',
						value: '支付宝支付',
						// checked: 'true'
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
			discounts() {
				uni.navigateTo({
					url: '../index/discounts'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			radioChange(e) {
				console.log(e.currentTarget)
			},
			//支付 
			payment() {
				// console.log(11)
				let params = {
					money: '998', //支付金额
				}
				this.$post(this.api.addOrder, params).then((res) => {
					console.log(res)
				}).catch((res) => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.svip {
		.navgation {
			position: relative;

			.navgation-box {
				position: fixed;
				top: 0;
				z-index: 1000;

				.left-back {
					image {
						width: 750rpx;
						height: 100rpx;
					}

					.left-back-text {
						display: flex;
						position: fixed;
						top: 50rpx;
						left: 30rpx;
						width: 400rpx;
						justify-content: space-between;

						.left-back-fan {
							display: flex;
							justify-content: center;
							flex-direction: column;

							image {
								width: 15rpx;
								height: 30rpx;
							}
						}

						.left-back-wen {
							display: flex;
							justify-content: center;
							flex-direction: column;

							text {
								font-size: 37rpx;
								font-family: Source Han Sans CN;
								font-weight: bold;
								color: #FFFFFF;
							}
						}
					}
				}
			}

			.navgation-box-image {
				margin-top: 100rpx;

				image {
					height: 200rpx;
					width: 750rpx;
				}
			}
		}

		.svip-bj {
			position: relative;
			margin: 0 auto;
			margin-top: -70rpx;

			.svip-bj-img {
				display: flex;
				justify-content: center;

				image {
					width: 700rpx;
					height: 133rpx;
				}
			}

			.svip-flex {
				width: 700rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;
				margin-top: -100rpx;

				.svip-ul {
					display: flex;

					.svip-li {
						display: flex;
						justify-content: center;
						flex-direction: column;
						margin-right: 30rpx;

						image {
							width: 45rpx;
							height: 40rpx;
						}
					}

					.svip-lo {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						text {
							z-index: 100;
							font-size: 40rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FFB777;
							letter-spacing: 3rpx;
						}
					}

				}

				.svip-cent {
					z-index: 100;
					display: flex;
					justify-content: center;
					flex-direction: column;

					.svip-lu {
						width: 136rpx;
						height: 48rpx;
						background: linear-gradient(90deg, #FFE186 0%, #EE924E 100%);
						border-radius: 24rpx;
						text-align: center;
						display: flex;
						justify-content: center;
						flex-direction: column;
						white-space: nowrap;

						text {
							font-size: 27rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}
		}

		.svip-annual {
			width: 686rpx;
			height: 283rpx;
			background-image: url(../../static/image/vipbj.png);
			background-repeat: no-repeat;
			background-size: 686rpx 283rpx;
			margin: 0 auto;
			margin-top: 140rpx;
			display: flex;

			.svip-annual-ul {
				.svip-annual-ul-text {
					width: 400rpx;
					padding: 57rpx 0rpx 30rpx 40rpx;

					text {
						font-size: 40rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
						letter-spacing: 3rpx;
					}
				}

				.svip-annual-ul-img {
					padding: 0 40rpx;

					image {
						width: 141rpx;
						height: 126rpx;
					}
				}

			}

			.svip-annual-up {
				padding: 10rpx 40rpx;

				.svip-annual-up-text {
					width: 150rpx;
					height: 150rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					text {
						font-size: 56rpx;
						font-family: DIN;
						font-weight: bold;
						color: #D18A4E;
						letter-spacing: 3rpx;
					}
				}

				.svip-annual-up-txt {
					width: 150rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					text {
						font-size: 48rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #FF0000;
					}
				}
			}
		}

		.vip-cneter {
			margin: 60rpx 0 0 0;

			.vip-siw {
				margin: 30rpx 0;
				width: 750rpx;

				radio-group {
					width: 700rpx;
					margin: 0 auto;

					.radio {
						display: flex;
						margin-top: 30rpx;

						.siw-flex {
							width: 700rpx;
							display: flex;

							.siw-img {
								display: flex;
								justify-content: center;
								flex-direction: column;

								image {
									width: 59rpx;
									height: 50rpx;
								}
							}

							.siw-tex {
								display: flex;
								justify-content: center;
								flex-direction: column;
								margin-left: 20rpx;

								text {
									font-size: 32rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #333333;
								}
							}
						}

						.siw-rad {
							display: flex;
							justify-content: center;
							flex-direction: column;
						}

					}
				}
			}
		}

		.vip-bottom {
			width: 686rpx;
			height: 98rpx;
			background: linear-gradient(90deg, #FFE186 0%, #EE924E 100%);
			border-radius: 13rpx;
			text-align: center;
			line-height: 98rpx;
			margin: 0 auto;
			margin-top: 200rpx;

			text {
				font-size: 32rx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				letter-spacing: 3rpx;
			}
		}
	}
</style>
